<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :down="{auto: false}" @up="upCallback" :up="{
        use: false,
        toTop: {
          bottom: '300rpx',
        },
      }">
			<view class="index index-bg">

				<view class="tab-con">
					<view v-show="active == 0">
						<index-home ref="indexHome" :home-data="homeData" :nav-list="navList" :live-list="liveLists"
							:goods-list="goodsList" :theme-list="themeList">
						</index-home>
					</view>
				</view>
			</view>

			<!-- #ifdef APP-PLUS -->
			<lyg-popup v-if="appConfig.app_agreement" title="用户使用及隐私保护政策提示"
				protocolPath="/bundle/pages/server_explan/server_explan?type=0"
				policyPath="/bundle/pages/server_explan/server_explan?type=1" policyStorageKey="has_read_privacy">
			</lyg-popup>
			<!-- #endif -->
		</mescroll-body>

		<tabbar></tabbar>

		<!-- 无网络提示 -->
		<u-no-network z-index="1200" @retry="handleRetry"></u-no-network>
	</view>
</template>

<script>
	import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from "vuex";
	import {
		getMenu,
		getHotGoods,
		getLevelOneList,
		getShopCategory,
		getIndexTheme,
		getIndexCate,
		getNearbyShops
	} from "@/api/store";
	import {
		getConfig
	} from "@/api/app";
	import {
		getLiveLists
	} from "@/api/live";
	import {
		strToParams,
		getRect
	} from "@/utils/tools";
	import Cache from "@/utils/cache";
	import {
		SHOP_CODE,
		SHOP_INFO
	} from "@/config/cachekey";
	const app = getApp();
	const homeItem = {
		name: "首页",
	};
	export default {
		mixins: [MescrollMixin, MescrollCompMixin],
		data() {
			return {
				offPrompt: true,
				active: 0,
				navBg: 0,
				goodsList: [],
				themeList: {},
				homeData: {},
				navList: [],
				enable: true,
				showCateList: [],
				liveLists: [],
			};
		},
		async onLoad() {
			await this.$onLaunched;
			this.getNearbyShopsFun();
			// 监听是否刷新页面
			uni.$on("refreshhome", () => {
				this.getNearbyShopsFun();
			});
		},
		onUnload() {
			uni.$off("refreshhome");
		},
		onShow() {
			this.enable = this.active == 0 ? true : false;
			this.getCartNum();
		},
		onHide() {
			// #ifdef H5
			this.enable = false;
			// #endif
		},
		onReady() {
			// #ifdef MP
			// 关闭胶囊提示
			this.offPromptFunc();
			// #endif
		},
		methods: {
			...mapActions(["getCartNum", "getUser", "getShop", "wxShare", "getAuthorize", "getLocationFunc"]),
			...mapMutations(["setConfig"]),
			// 网络重试刷新网络请求（解决在ios中首次进入时需要授权蜂窝加载空白页面问题
			async handleRetry() {
				this.getConfigFun();
				this.getUser();
			},
			// #ifdef MP
			offPromptFunc() {
				let time = 8;
				this.offPrompt = setInterval(() => {
					time -= 1;
					if (time <= 0) this.clearIntervalFunc();
				}, 1000);
			},
			clearIntervalFunc() {
				clearInterval(this.offPrompt);
				this.offPrompt = false;
			},
			// #endif
			// 获取菜单
			async getMenuFun() {
				const {
					code,
					data
				} = await getMenu({
					type: 1,
				});
				if (code == 1) {
					this.navList = data;
				}
			},
			// 获取首页数据
			async getHomeFun() {
				if (this.shopInfo.current_shop || Cache.get(SHOP_INFO).current_shop) {
					this.homeData = this.shopInfo ? this.shopInfo : Cache.get(SHOP_INFO)
				} else {
					this.$toast({
						title: "请选择门店"
					}, {
						tab: 2,
						url: '/pages/shop_street/shop_street'
					});
				}
			},
			async getShopCategoryFun() {
				const {
					code,
					data
				} = await getShopCategory();
				if (code == 1) {
					this.goodsList = data;
				}
			},
			async getIndexThemeFun() {
				let _themeList = {
						template1: [],
						template2: [],
						template3: [],
						template4: [],
						template5: [],
						template6: []
					},
					_cateList = {
						template1: [],
						template2: [],
						template3: []
					}
				let themeObj = await getIndexTheme();
				if (themeObj.code == 1) {
					if (themeObj.data.template1) {
						_themeList.template1 = themeObj.data.template1;
						_themeList.template1.forEach(item => {
							this.$set(item, 'type', 'theme')
						})
					}
					if (themeObj.data.template2) {
						_themeList.template2 = themeObj.data.template2;
						_themeList.template2.forEach(item => {
							this.$set(item, 'type', 'theme')
						})
					}
					if (themeObj.data.template3) {
						_themeList.template3 = themeObj.data.template3;
						_themeList.template3.forEach(item => {
							this.$set(item, 'type', 'theme')
						})
					}
					if (themeObj.data.template4) {
						_themeList.template4 = themeObj.data.template4;
						_themeList.template4.forEach(item => {
							this.$set(item, 'type', 'theme')
						})
					}
					if (themeObj.data.template5) {
						_themeList.template5 = themeObj.data.template5;
						_themeList.template5.forEach(item => {
							this.$set(item, 'type', 'theme')
						})
					}
					if (themeObj.data.template6) {
						_themeList.template6 = themeObj.data.template6;
						_themeList.template6.forEach(item => {
							this.$set(item, 'type', 'theme')
						})
					}
				}

				// let cateObj = await getIndexCate();
				// if (cateObj.code == 1) {
				// 	if (cateObj.data.template1) {
				// 		_cateList.template1 = cateObj.data.template1;
				// 		_cateList.template1.forEach(item => {
				// 			this.$set(item, 'type', 'cate')
				// 		})
				// 	}
				// 	if (cateObj.data.template2) {
				// 		_cateList.template2 = cateObj.data.template2;
				// 		_cateList.template2.forEach(item => {
				// 			this.$set(item, 'type', 'cate')
				// 		})
				// 	}
				// 	if (cateObj.data.template3) {
				// 		_cateList.template3 = cateObj.data.template3;
				// 		_cateList.template3.forEach(item => {
				// 			this.$set(item, 'type', 'cate')
				// 		})
				// 	}
				// }
				// _themeList.template1 = _themeList.template1.concat(_cateList.template1)
				// _themeList.template2 = _themeList.template2.concat(_cateList.template2)
				// _themeList.template3 = _themeList.template3.concat(_cateList.template3)
				this.themeList = _themeList;
			},
			changeActive(index) {
				this.active = index;
				this.enable = index == 0;
				this.mescroll.optDown.use = index == 0;
				this.showCateList[index] = true;
			},
			async downCallback() {
				if (Cache.get(SHOP_CODE)) {
					// await this.getLevelOneListFun();
					// await this.getMenuFun();
					await this.getHomeFun();
					// await this.getShopCategoryFun();
					await this.getIndexThemeFun();
					this.mescroll.endSuccess(0, false);
				}
			},
			async getConfigFun() {
				const {
					code,
					data
				} = await getConfig();
				if (code == 1) {
					this.setConfig(data);
					if (data.is_open_nearby) {
						// 获取定位
						this.getLocationFunc();
					}
					// 防止第一次调用时拿不到数据
					this.wxShare();
				}
			},
			getNearbyShopsFun() {
				if (Cache.get(SHOP_CODE)) {
					this.getShop().then(() => {
						this.downCallback();
					});
				} else {
					getNearbyShops({
						...this.locationInfo
					}).then((res) => {
						if (res.code == 1) {
							const id = res.data[0].id;
							Cache.set(SHOP_CODE, id);
							this.getShop().then(() => {
								this.downCallback();
							});
						} else {
							this.$toast({
								title: res.msg
							});
						}
					});
				}
			}
		},
		computed: {
			...mapGetters(["sysInfo", "inviteCode", "appConfig", "cityInfo", "shopInfo", "locationInfo"]),
			navH() {
				return this.sysInfo.navHeight + "px";
			},
			// 分类栏悬浮高度
			cateTop() {
				return this.sysInfo.navHeight + uni.upx2px(80) + "px";
			}
		}
	};
</script>

<style lang="scss">
	page {
		padding: 0;
	}

	.index-bg {
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.index {
		min-height: calc(100vh - var(--window-bottom));

		.u-navbar {
			::v-deep .u-search {
				padding: 0 30rpx;
			}
		}

		// 胶囊提示
		.capsule-tips {
			width: 584rpx;
			color: #ffffff;
			padding: 12rpx 18rpx;
			border-radius: 14rpx;
			background: rgba(0, 0, 0, 0.7);
			position: relative;
			position: absolute;
			z-index: 9999;
			bottom: -80rpx;
			right: -150rpx;
		}

		.capsule-tips::after {
			content: "";
			border-bottom: 14rpx solid rgba(0, 0, 0, 0.7);
			border-right: 14rpx solid transparent;
			border-left: 14rpx solid transparent;
			position: absolute;
			top: -14rpx;
			right: 88rpx;
		}

		.cate-btn {
			padding: 12rpx 16rpx 12rpx 20rpx;
			border-radius: 60rpx 0 0 60rpx;
			background-color: rgba(256, 256, 256, 0.4);
		}
	}
</style>